<template>
    <div>
        <div class="container">
            <!-- The video container -->
            <div class="container__wrapper">
                <video class="container__video" src="https://csslayout.io/assets/video-background-demo.mp4" />
            </div>

            <!-- The content -->
            <!--            <div class="container__content">-->
            <!--                1-->
            <!--            </div>-->
        </div>
        <div style="padding: 50px;">
            <div class="container">
                <!-- Value -->
                <div class="container__value">
                    2387
                </div>

                <!-- Label -->
                <div class="container__label">
                    STARS
                </div>
            </div>
            <div class="cards">
                <!-- A card with given width -->
                <div class="cards__item">
                    1
                </div>         <div class="cards__item">
                    2
                </div>         <div class="cards__item">
                    3
                </div>         <div class="cards__item">
                    4
                </div>
                <div class="cards__item">
                    5
                </div>
            </div>
        </div>
        <div>
            <table-pane :table-data="tableData" :table-title-data="columns"
                        :config-flag="{
                            needPage:true
                        }"
                        :pager="listPagination"
                        @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script>
import TablePane from '@/components/tablePanel/table'

export default {
    components: {TablePane},
    props: [],
    data() {
        return {
            showSelection: true, // 多选插槽
            footerSlot: true, // 尾部插槽
            columns: [
                {
                    value: 'date',
                    label: '日期'
                },
                {
                    value: 'name',
                    label: '姓名',
                    slotName: 'test'
                }
            ], // 列属性
            tableData: [], // 表格数据
            showPagination: true, // 是否分页
            listPagination: {
                current: 1,
                size: 10,
                totalCount: 0
            }// 分页
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
        this.getTestList()
    },
    methods: {
        getTestList() {
            const array = []
            for (let i = 0; i < 100; i++) {
                array.push({
                    key: i,
                    name: `化学实习-202${i + 1}`,
                    date: `2020级${i + 1}班`
                })
            }
            this.tableData = array
            this.listPagination.totalCount = array.length
        },
        handleSizeChange(val) {
            console.log(val)
            this.listPagination.size = val
        },
        handleCurrentChange(val) {
            console.log(val)
            this.listPagination.current = val
        }
    }
}

</script>
